import React from "react";
import { createUseStyles } from "react-jss";
import Checkbox from "../../Checkbox";
import Radio from "../../Radio";
const { CheckboxGroup } = Checkbox;

interface Props {
  value: Array<string | number>;
  options: Array<{ label: string; value: string | number }>;
  multiple?: boolean;
  disabled?: boolean;
  onChange?: (v: Array<string | number>) => void;
}

export default function Operator({
  multiple = false,
  options,
  value = [],
  disabled = false,
  onChange,
}: Props) {
  const classes = useStyles();

  if (multiple)
    return (
      <div className={classes.checkbox}>
        <CheckboxGroup
          options={options}
          value={value}
          onChange={onChange}
          disabled={disabled}
        />
      </div>
    );

  return (
    <Radio
      className={classes.radio}
      options={options}
      value={value?.[0]}
      disabled={disabled}
      onChange={(v) => {
        onChange?.([v]);
      }}
    />
  );
}

const useStyles = createUseStyles({
  radio: {
    color: "#666",
  },
  checkbox: {
    color: "#666",
    "& .ct0-checkbox-single": {
      padding: "0 10px",
    },
    "& .ct0-checkbox-single+.ct0-checkbox-single": {
      marginLeft: "10px",
    },
  },
});
